<template>
  <view class="message">
    <view class="title">
      {{ t("My Questions:") }}
    </view>

    <view class="search-box">
      <img
        v-show="visible"
        src="/static/images/search/search-svgrepo-com@2x.png"
        alt=""
      />
      <view v-show="visible" class="placeholder">{{
        t("Please enter a keyword")
      }}</view>
      <input
        v-model="searchVal"
        type="text"
        name=""
        id=""
        @focus="onFocus"
        @blur="onBlur"
      />
    </view>
    <Tab :tabList="tabList" @tabClick="changeTab" />
    <view class="content_box" v-if="data">
      <view
        :class="['item', item.status != '3' ? 'unred' : '']"
        v-for="(item, i) in data"
        :key="i"
        @click="upService(item)"
      >
        <view class="content">
          <view class="num"
            ><view
              :class="['readStatus', item.status !== '3' ? 'unread' : '']"
            ></view>
            {{ i + 1 }}.
          </view>
          <view class="bpx">
            <view
              :class="[
                'text',
                item.status != 1 && item.updateTime ? 'active' : '',
              ]"
            >
              {{ item.message }}
            </view>
            <view class="time">
              <view>{{ item.createTime }} </view>
              <view>{{ comType(item.status) }}</view>
            </view>
          </view>
        </view>
        <view class="right" v-if="item.updateTime">
          <uv-icon name="arrow-right" color="#A4A4A4"></uv-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useAttrs, ref, onMounted, computed } from "vue";
import Tab from "./tab.vue";
const $attrs = useAttrs();
import { useI18n } from "vue-i18n";
import { watch } from "vue";

const { t } = useI18n();
const emits = defineEmits(["prentCheck"]);
const upService = (params) => {
  // if(!params.updateTime){
  // 	return
  // }
  emits("prentCheck", params);
};

const tabIndex = ref("0");
const data = computed(() => {
  // $attrs.dataList status 排序
  let dataList = [];
  if ($attrs.dataList && $attrs.dataList.length) {
    dataList = $attrs.dataList.sort((a, b) => {
      return a.status - b.status;
    });
  }
  dataList = dataList.filter((item) => {
    if (tabIndex.value == 0) {
      return item;
    } else {
      return item.status == tabIndex.value;
    }
  });

  return dataList;
});
const changeTab = (item) => {
  tabIndex.value = item.value;
};
// 设置条目数量
const setItemNum = (dataList) => {
  if (dataList.length > 0) {
    tabList.value[0].len = 0;
    tabList.value[1].len = 0;
    tabList.value[2].len = 0;
    tabList.value[3].len = 0;
    for (let item of dataList) {
      tabList.value[0].len++;
      if (item.status === "1") {
        tabList.value[1].len++;
      }
      if (item.status === "2") {
        tabList.value[2].len++;
      }
      if (item.status === "3") {
        tabList.value[3].len++;
      }
    }
  }
};

watch(
  () => $attrs.dataList,
  (newVal, oldVal) => {
    setItemNum(newVal);
  }
);
const comType = (status) => {
  if (status == 1) {
    return "Unreplied";
  } else if (status == 2) {
    return "Unread";
  } else {
    return "Read";
  }
};

const tabList = ref([
  {
    label: t("Lang_All"),
    value: "0",
    len: 0,
  },
  {
    label: t("Lang_Unreplied"),
    value: "1",
    len: 0,
  },
  {
    label: t("Lang_Unread"),
    value: "2",
    len: 0,
  },
  {
    label: t("Lang_Read"),
    value: "3",
    len: 0,
  },
]);

const visible = ref(true);
const searchVal = ref("");
function onFocus(e) {
  visible.value = false;
}

function onBlur(e) {
  if (!searchVal.value) visible.value = true;
}
</script>

<style lang="scss" scoped>
.message {
  background: #fff;
  width: 95%;
  width: calc(100% - 20rpx);
  margin: 40rpx auto;
  border-radius: 10rpx;
  padding: 20rpx;
  box-sizing: border-box;
  .search-box {
    border: 2rpx solid #979797;
    height: 58rpx;
    border-radius: 58rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    justify-content: center;
    position: relative;
    img {
      width: 30rpx;
      height: 30rpx;
      margin-right: 15rpx;
      pointer-events: none;
    }
    .placeholder {
      font-size: 18rpx;
      color: #aeaeae;
      pointer-events: none;
    }
    input {
      height: 58rpx;
      flex: 1;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 15rpx;
      right: 15rpx;
      text-align: center;
    }
  }

  .title {
    padding: 10rpx 0 20rpx;
    font-size: 30rpx;
  }

  .content_box {
    font-size: 28rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 20rpx;
      background: #f4f6f8;
      margin-bottom: 4rpx;
      &.unred {
        background: #fff;
      }
      .content {
        display: flex;
        align-items: center;
        width: 100%;
        height: 3rem;
        overflow: hidden;
        .num {
          color: #000;
          width: 55rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          .readStatus {
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background: transparent;
            margin-right: 10rpx;

            &.unread {
              background: red;
            }
          }
        }
        .bpx {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          margin: 0 10rpx;
          flex: 1;
        }
        .text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .time {
          color: #a19e9e;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10rpx;
        }

        .active {
        }
      }
    }
  }
}
</style>
